<template>
  <!-- 添加或修改边民合作社备案对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="1400px"
    append-to-body
    :close-on-click-modal="false"
    @close="close"
  >
    <div class="app-container">
      <basic-container>
        <div class="basic-info">
          <div class="ui-top-view">
            <div class="ui-top-title">基本信息</div>
          </div>
          <div class="ui-basic-content">
            <!-- 基本信息 -->
            <basic-info
              ref="basicInfo"
              :dict="dict"
              :detailData="detailData"
              :dialogType="dialogType"
            ></basic-info>
          </div>
        </div>
      </basic-container>

      <basic-container>
        <div class="basic-info">
          <div class="ui-top-view">
            <div class="ui-top-title">运输工具信息</div>
          </div>
          <div class="ui-basic-content">
            <!-- 运输工具信息 -->
            <add-transport
              ref="addTransport"
              :dialogType="dialogType"
              :detailData="detailData"
              :transportList="transportList"
            ></add-transport>
          </div>
        </div>
      </basic-container>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addSwBdHead} from  "@/api/swdecl/swBdHead";
import basicInfo from "./basicInfo";
import AddTransport from "./addTransport.vue";
import {getMftManifestHead} from "@/api/swdecl/mftManifestHead";

export default {
  name: "addEditHeavy",
  components: {
    basicInfo,
    AddTransport,
  },
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    rowData: {
      type: Object,
      default: () => {
      },
    },
    dict: {},
  },
  data() {
    return {
      // 弹出层
      dialogVisible: false,
      // 标题
      title: "新增",
      //海关关区信息列表
      customsList: [],
      fieldOptions: [],
      // 表单参数
      params: {
        goodsList: [],
      },
      detailData: {},
      transportList: [],
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        if (this.dialogType == "add") {
          this.title = "新增";
        } else if (this.dialogType == "edit") {
          this.title = "编辑";
          this.loadDetail();
        } else if (this.dialogType == "detail") {
          this.title = "详情";
          this.loadDetail();
        }
      });
    },
    close() {
      this.$refs.basicInfo.$refs["form"].resetFields();
      this.$refs.addTransport.vehicleList = [];
      this.dialogVisible = false;
      this.detailData = {};
    },
    // 获取详情
    loadDetail() {
      const id = this.rowData.id;
      getMftManifestHead(id).then((res) => {
        if (res.code == 200) {
          this.detailData = {...res.data};
          this.transportList = res.data.bindingRoadTransportList;
        }
      });
    },
    // 提交表单
    submitForm() {
      this.$refs.basicInfo.$refs["form"].validate((valid) => {
        if (valid) {
          //进出境基本信息
          let basicInfo = this.$refs.basicInfo.form;
          let params = {
            ...basicInfo,
            transportList: this.$refs.addTransport.vehicleList,
          };
          addSwBdHead(params).then((res) => {
            if (res.code === 200) {
              this.$message.success("新增成功！");
              this.$emit("handleQuery");
              this.close();
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0;
  max-height: 615px;
  overflow-y: scroll;
}
</style>
